<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('点餐列表')" />
</head>
<body class="gray-bg">
     <div class="container-div" style="margin-top:5px;padding:px;">
     		<div class="col-sm-12 select-table search-collapse">
		     	<table style="border-collapse:separate; border-spacing:1px 30px;" >
		     		<input name="endTime" id="endTime" th:value="${endTime}" type="hidden">
		     		<input name="isDiningVagetables" id="isDiningVagetables" th:value="${isDiningVagetables}" type="hidden">
					  <th:block th:each="tzVagetables,tzVagetablesStat: ${tzVagetabless}">
						  <p th:remove="tag" th:utext="${(tzVagetablesStat.index+1)%4==1 ? '&lt;tr&gt;':''}"/>
							  <td style="width:330px;" >
						       	   <div>
						            <table>
						             	<tr>
						                 	<td rowspan="5" class="bookPic"><img class="img-circle img-lg" th:src="@{/img/vagetables.jpg}"></td>
						                     <td><span><input type="checkbox" name="vagetablesId" th:value="${tzVagetables.vagetablesId}" />&nbsp;菜名：</span></td>
						                     <td th:text="${tzVagetables.vagetablesName}"></td>  
						                 </tr>
						                 <tr>
						                 	<td><span>&nbsp;价格：</span></td>
						                     <td><span><strong style="color:red;" th:text="${tzVagetables.price}"></strong>&nbsp;元</span></td>
						                 </tr>
						                 <tr>
						                 	<td><span>&nbsp;口味：</span></td>
						                     <td th:text="${tzVagetables.taste}"></td>
						                 </tr>
						             </table>
						      	   </div>
					          </td>
					       <p th:remove="tag" th:utext="${(tzVagetablesStat.index+1)%4==0 ? '&lt;/tr&gt;':''}"/>
		         
		       </table>
		       
		       
			<div class="modal-footer no-margin-top">
				<input type="hidden" id="currentPageNum" name="currentPageNum" th:value="${tzVagetables.currentPageNum}"/>
			    <ul class="pagination pull-right no-margin">
			
			        <!-- 首页 -->
			        <li>
			            <a th:href="'../order/diningView?pageNum=1'">首页</a>
			        </li>
			
			        <!-- 上一页 -->
			        <li th:if="${tzVagetables.hasPrevious}">
			            <a th:href="@{'../order/diningView?pageNum='+${tzVagetables.currentPageNum-1}}" th:text="上一页"></a>
			        </li>
			        
			        
			        <!-- 中间页 -->
			        <li th:each="pageNum:${#numbers.sequence(1, tzVagetables.totalPageNum)}">
			            <a th:href="@{'../order/diningView?pageNum='+${pageNum}}" th:text="${pageNum}" th:if="${pageNum ne tzVagetables.currentPageNum}"></a>
			            <a th:href="@{'../order/diningView?pageNum='+${pageNum}}" th:text="${pageNum}" th:if="${pageNum eq tzVagetables.currentPageNum}" th:style="'font-weight:bold;background: #6faed9;'"></a>
			        </li>
			
			        <!-- 下一页 -->
			        <li th:if="${tzVagetables.hasNext}">
			            <a th:href="@{'../order/diningView?pageNum='+${tzVagetables.currentPageNum+1}}">下一页</a>
			        </li>
			
			        <!-- 尾页-->
			        <li>
			            <a th:href="@{'../order/diningView?pageNum='+${tzVagetables.totalPageNum}}">尾页</a>
			        </li> 
			
			    </ul>
			</div>
	       
		       <div id="showTimeDiv" style="text-align:center;margin-top:5px;">
		       		<label id="time_b"></label>
		       </div>
		       <div id="showVagetablesDiv" style="text-align:center;margin-top:5px;">
		       	   <label id="vagetablesLabel"></label>
		       </div>
		       <div style="text-align:center;height:50px;line-height:50px;margin-top:25px;">
		       		<button id="diningVagetables" style="width:120px;vertical-align:middle;" onclick="submit();">订餐</button>
		       		<button id="noDiningVagetables" style="width:120px;vertical-align:middle;" onclick="delOrderSubmit();">取消订餐</button>
		       </div>
	       </div>
	    </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "system/order";
        $("#diningVagetables").disabled=false;
        //判断是否订餐
        $.ajax({
            url: prefix + "/isDiningVagetables",
            type: "post",
            success: function(result) {
            	if (result.code == 0) {
            		var msg = result.msg;
            		//存在
            		if(result.msg!=''){
            			$("#diningVagetables").hide();
            			$("#showTimeDiv").hide();
            			$("#noDiningVagetables").show();
            			$("#vagetablesLabel").html("<span style='font-size:20px;color:red;'>已订餐："+result.msg+"</span>");
            		}else{
            			
            			$("#showDiv").show();
            			//是否属于订餐时间   1属于 0不属于
            			var isDiningVagetables = $("#isDiningVagetables").val();
            			if(isDiningVagetables==1){
            				$("#showTimeDiv").show();
            			}else{
            				//不是订餐时间  不显示倒计时 并将订餐按钮置为不可用
            				$("#showTimeDiv").hide();
            				//$("#diningVagetables").hide();
            			}
            			$("#noDiningVagetables").hide();
            			$("#vagetablesLabel").html("");
            		}
            	}
            }
        })
        
        function submit() {
        	var vagetablesId;
    		var data = [];
        	$("input[name='vagetablesId']:checked").each(function(i){//把所有被选中的复选框的值存入数组
        		vagetablesId =$(this).val();
            });
    		data.push({"name": "vagetablesId", "value": vagetablesId});
    		
        	$.ajax({
	            url: prefix + "/diningSave",
	            data: data,
	            type: "post",
	            success: function(result) {
	            	if (result.code == 0) {
	            		layer.msg("订餐成功,正在刷新数据请稍后……", {
		            	    icon: 1,
		            	    time: 500,
		            	    shade: [0.1, '#8F8F8F']
		            	},function() {
		            		location.reload();
		            	});
	            	} else {
	            		alert(result.msg);
	            		location.reload();
	            	}
	            }
	        })
        }
        
        function delOrderSubmit() {
    		
        	$.ajax({
	            url: prefix + "/delOrderSubmit",
	            type: "post",
	            success: function(result) {
	            	if (result.code == 0) {
	            		layer.msg("取消订餐成功,正在刷新数据请稍后……", {
		            	    icon: 1,
		            	    time: 500,
		            	    shade: [0.1, '#8F8F8F']
		            	},function() {
		            		location.reload();
		            	});
	            	} else {
	            		alert(result.msg);
	            	}
	            }
	        })
        }
        
		function searchDining() {
			var data = [];
    		var tzDiningRoomId = $("#tzDiningRoom").val();
    		data.push({"name": "tzDiningRoomId", "value": tzDiningRoomId});
    		$.operate.get(prefix + "/diningView");
        }
        
        function ShowCountDown(jztime,divname) {
            var now = new Date();
            var endDate = new Date(Date.parse(jztime.replace(/-/g, "/")));
            var leftTime=endDate.getTime()-now.getTime();
            var leftsecond = parseInt(leftTime/1000);
            var day1=Math.floor(leftsecond/(60*60*24));
            var hour=Math.floor((leftsecond-day1*24*60*60)/3600);
            var minute=Math.floor((leftsecond-day1*24*60*60-hour*3600)/60);
            var second=Math.floor(leftsecond-day1*24*60*60-hour*3600-minute*60);
            if(day1 < 10){day1 = "0"+day1;}
            if(hour < 10){hour = "0"+hour;}
            if(minute < 10){minute = "0"+minute;}
            if(second < 10){second = "0"+second;}
            var cc = document.getElementById(divname);
            var secondStr = hour*60*60+minute*60+second;
            cc.innerHTML = "<span style='font-size:20px;color:black;'>订餐倒计："+secondStr+"秒</span>";
        }
        var engTime = $("#endTime").val();//截止时间
        window.setInterval(function(){ShowCountDown(engTime,'time_b');}, 1000);
    </script>
</body>
</html>